<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>

		<div id="app">

			<h3>v1 监听器</h3>
			年龄: {{age}} <button @click="age++">工龄增长</button>
			<p style="color:red" v-if="tuixiu1">恭喜你退休了</p>

			<hr>
			<h3>v2 监听器</h3>
			姓名：{{user.name}} 年龄: {{user.age}} <button @click="user.age++">工龄增长</button>
			<p style="color:red" v-if="tuixiu2">恭喜你退休了</p>


		</div>

		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					age: 58,
					user: {
						name: '张无忌',
						age: 58,
					},
					tuixiu1: false,
					tuixiu2: false
				},
				watch: {
					age(newVal, oldVal) {
						if (newVal >= 60) {
							this.tuixiu1 = true;
						}
					},
					// this.user = ?   this.user.age = ? 不会触发监听器
					user: {
						deep: true,
						handler(newV, oldV) {


							if (newV.age >= 60) {
								this.tuixiu2 = true;
							}

							console.log(newV);
							// console.log(oldV);

						}
					}
				}

			});
		</script>

	</body>
</html>
